<template>
    <div>
     <div class="container" v-if="!flagCourse">  
        <el-row class="top-btn">
            <el-button color="#1c84c6" class="handle-btn"  @click="rollback">返回</el-button>
        </el-row>
        <el-row>
            <!-- <el-text class="text-title">班级名称:{{ $route.query.className }}</el-text> -->
            <el-text class="text-title">班级名称:Java全栈开发</el-text>
        </el-row>
        <el-divider/>
        <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
                <div class="div-content">
                    <el-text class="text-div">班级介绍</el-text>
                    <div class="div-blue" ></div>
                </div>
                <div style="padding-left: 20px; font-size: 14px;">
                    JavaEE企业级开发
                </div>
                <div class="div-content">
                    <el-text class="text-div">班级课程</el-text>
                    <div class="div-blue" ></div>
                </div>
                <div style="width: 152px;height: 44px; margin:50px 50px;border: 5px solid #e7eaec; text-align: center;">
                    <el-image :src="imgUrl" alt="Java核心技术(一)"></el-image>
                    <!-- <a href="#" @click="lookCourseDetail"><span>Java核心技术(一)</span></a> -->
                    <el-button  text @click="lookCourseDetail"><span>Java核心技术(一)</span></el-button>
                    <span class="bg"></span>
                </div>
            </el-tab-pane>                                       
            <el-tab-pane label="班级资源">
                <div class="div-content">
                    <el-text class="text-div">班级资源</el-text>
                    <div class="div-blue" ></div>
                </div>
                <classRes></classRes>
            </el-tab-pane>
            <!-- <el-tab-pane label="班级问题">
                <div class="div-content">
                    <el-text class="text-div">班级问答</el-text>
                    <div class="div-blue" ></div>
                </div>
                <classQues></classQues>
            </el-tab-pane> -->
            <el-tab-pane label="批改作业">
               <classWork></classWork>
            </el-tab-pane>       
            <el-tab-pane label="学生评价">
                <classEvalute/>
            </el-tab-pane>       
            <el-tab-pane label="请假处理">
                <stuLeave></stuLeave>
            </el-tab-pane>       
            <el-tab-pane label="违纪处理">
                <stuViolation></stuViolation>
            </el-tab-pane>       
        </el-tabs>

        </div>
    <catCourseDetail v-else   v-model:flag-course="flagCourse"></catCourseDetail>
    </div>
</template>

<script setup>
import {ref,reactive,toRefs} from 'vue'
// import { useRoute,useRouter } from 'vue-router';
import imgUrl  from '../../assets/img/getImage_002.png'
import classRes from './subVue/classRes.vue' 
import classQues from './subVue/classQues.vue';
import classWork from './subVue/classWork.vue';
import classEvalute from './subVue/classEvalute.vue';
import stuLeave from './subVue/stuLeave.vue';
import stuViolation from './subVue/stuViolation.vue';
import catCourseDetail from './subVue/CourseDetail.vue'
let props = defineProps({
     isZi:Boolean,//子组件
   
})
  
const {isZi} = toRefs(props)
const emit = defineEmits(['update:isZi'])
const rollback=()=>{
     emit('update:isZi',true)
}   

//查看课程详细
const flagCourse = ref(false)
const  lookCourseDetail = ()=>{
    flagCourse.value= true
}

</script >
<style lang="less" scoped>
  .top-btn{
      float: right;
      padding-right: 65px;
   }
   .text-div{
      font-size: 21px;
      padding-left: 20px; 
      font-weight: 100;
    //   color: #676a6c;;
      color: #676a6c;
    }

 .text-title{
      font-size: 16px;
      font-weight: 600;
   }
.div-content{
    border-bottom: 1px solid #e7eaec;
    margin-top: 20px;
    margin-bottom: 20px;
} 
.div-blue{
    width: 90px;height: 4px; 
    background-color: #1a7bb9;
    margin-left: 20px;
}
   .bg {
        width: 152px;
        height: 0;
        background: #2f4050;;
        position: absolute;
        left: 4px;
        top: 56px;
        z-index: 1;
        overflow: hidden;
    }
</style>